<template>
    <div style="width: 50%; margin: 10px auto;">
        <div class="card" style="margin-bottom: 10px;">
            <div style="font-size: 20px; text-align: center;margin-bottom: 20px;">{{ posts.title }}</div>
            <div style="color: #666; margin-bottom: 40px; text-align: center;">
                <span><i class="el-icon-user"> {{ posts.userName }}</i></span>
                <span style="margin-left: 20px;"><i class="el-cion-time"> {{ posts.time }}</i></span>
                <span style="margin-left: 20px;"><i class="el-cion-reading"> {{ posts.readCount }}</i></span>
            </div>
            <div class=" w-e-text" v-html="posts.content"></div>
        </div>

        <div class="card" style="padding:20px 30px;">
            <Comment :fid="id" module="posts" />
        </div>
    </div>
</template>

<script>
import Comment from '@/components/Comment.vue'

export default{
    name:"PostsDetail",
    components:{Comment},
    data(){
        return {
            id:this.$route.query.id,
            posts:{}
        }
    },
    created() {
        this.$request.put('/posts/updateCount/' + this.id).then(res => {
            this.load()
        })
    },
    methods: {
        load(){
            this.$request.get('/posts/selectById/' + this.id).then(res => {
                this.posts = res.data || {}
            })
        }
    },
}
</script>

<style scoped>

</style>